<template>
    <div class="tabs">
        <!-- 面包屑  effect=dark 选中标签， plain 未选中 -->
        <el-tag
            v-for="(item, index) in tags"
            :key="item.path"
            :closable="item.name !== 'home'"
            :effect="$route.name === item.name ? 'dark' : 'plain'"
            @click="changeMenu(item)"
            @close="handleClose(item, index)"
            size="small">
            {{ item.label }}
        </el-tag>
    </div>
</template>

<script>
    // 组件中 获取 store 中的 state 
    import { mapState, mapMutations} from 'vuex';
    export default {
        name: 'CommonTag',
        data() {
            return {}
        },
        computed: {
            // 辅助函数 mapState 返回一个对象 
            ...mapState({
                tags: state => state.tab.tabsList
            })
        },
        mounted(){
            console.log(this.$route.name, this.tags)
        },
        methods: {
            // mapMutations 传入数组，返回对象，解构 （调用 mutation 中的方法 closeTag）
            ...mapMutations(['closeTag']),

            // 点击 tag 跳转 
            changeMenu(item){
                console.log(item)
                // this.$router.push('/home')
                this.$router.push({name: item.name})
            },

            // 点击 tag 删除标签
            handleClose(item, index){
                // this.$store.commit()  // 通常的方法
                // 调用 store 中的 mutations 方法 删除 tag 数据 (可以用辅助函数 mapMutations)
                this.closeTag(item)

                // 删除指定的 tags 数据 后的标识长度
                const length = this.tags.length

                // 删除标签后 链接修改
                // 如果删除的不是当前激活的标签 不是当前路由
                if(item.name != this.$route.name){
                    return
                }
                // 删除最后一项 或者中间激活的标签  --- 路由跳转
                if(index === length){
                    this.$router.push({
                        name: this.tags[index-1].name
                    })
                } else {
                    this.$router.push({
                        name: this.tags[index].name
                    })
                }

            }
        }
    }
</script>
<style lang="less" scoped>
    .tabs {
        padding: 20px;
        .el-tag {
            margin-right: 15px;
            cursor: pointer;
        }
    }
</style>  